<template>
  <div>
    <van-sticky >
    <van-nav-bar title="闭眼爆款买" left-text="返回" left-arrow @click-left="onClickLeft">
      <template #right>
        <van-icon name="search" size="24" />
      </template>
    </van-nav-bar>
 
  

  <div class="topnav">
          
          <van-tabs 
            color="#f03d37" 
            class="tabs" 
            v-model:active="active">
            <van-tab title="综合" name="1"></van-tab>
            <van-tab title="销量" name="2"></van-tab>
            <van-tab title="价格" name="3"></van-tab>
            <van-tab title="筛选" name="4"></van-tab>

          </van-tabs>
          <!-- <van-icon
            style="font-weight: bold"
            color="#f03d37"
            name="search"
            size="20"
          /> -->
        </div>
      </van-sticky>
      <van-grid :column-num="2">
  
        <van-grid-item id="box" v-for="item in shops" :key="item.goods_id"> 
          <div class="box1" @click="$router.push('/ShopDetail')" >
            <img src="@/assets/tabs/exhibition1.jpg" alt="" />
            <div class="box2">
              <span>{{item.goods_name}}</span>
              <span class="span2">{{item.description}}</span>
              <div>
                <span>¥ {{item.show_price}}</span>
                <span>已售 {{ item.sales_volume }}</span>
              </div>
            </div>
          </div>
        
      </van-grid-item>

      </van-grid>
        <!-- BackTop 回到顶部 -->
        <van-back-top style="margin-bottom: 50px" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import httpApi from '@/http'
import Shop from '@/types/Shop'

const items = [{ text: '林家罐头' }, { text: '林家肉脯' },{ text: '林家坚果' },{ text: '林家果脯' },{ text: '林家零食' }]
// 获取商品信息
const shops = reactive<Shop[]>([])
onMounted(()=>{
  httpApi.commodityApi.queryAll().then(res=>{
    console.log('全部商品',res);
    let shop:Shop[] = res.data.data
    shops.push(...shop)
    
    
  })
})

const onClickLeft = () => history.back();
const active = ref(0)
</script>

<style scoped lang="scss">
:deep(.van-nav-bar__content) {
  height: 50px;
  background-color: #fff;
  color: black;
  --van-nav-bar-text-color: black;
  --van-nav-bar-icon-color: black;
}

:deep(.van-nav-bar__text) {
  color: black;
  font-size: 14px;
  font-weight: lighter;
}

:deep(.van-nav-bar__title) {
  color: black;
}

#box {
  width: 100%;
  .box1 {
    height:50vw ;
    
    margin-bottom: 10px;
  }

  img {
    width: 40vw;
    height: 70%;
  }

  .box2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
    span{
      margin-bottom: 5px;
    }
    >span:first-child {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box; //将对象作为弹性伸缩盒子模型显示。
      -webkit-box-orient: vertical; // 从上到下垂直排列子元素
      -webkit-line-clamp: 2; //显示的行数
      font-size: 14px;
    }

    >.span2 {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box; //将对象作为弹性伸缩盒子模型显示。
      -webkit-box-orient: vertical; // 从上到下垂直排列子元素
      -webkit-line-clamp: 1; //显示的行数
      font-size: 2px;

      color: burlywood;
    }

    >div {
      justify-content: space-between;
      :first-child {
        font-weight: bold;
        color: palevioletred;
      }

      :last-child {
        margin-left: 10px;
        font-weight: lighter;
        font-size: 12px;
      }
    }

  }
}
.topnav {
    background-color: #fff;
    display: flex;
    align-items: center;
    
    border-bottom: 1px solid #eee;
    .tabs {
      flex: 1;
      
    }
    
  }
</style>